<!doctype html>
<html>
<head>
	<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">

	<script type="text/javascript" src="./sidebar.js"></script>
	<link rel="stylesheet" type="text/css" href="./sidebar.css">

	<script type="text/javascript" src="./data/data.js"></script>
	<style>
		.app_button button{
			padding:0;
			text-align: center;
		}

	</style>
</head>
<body>

<script type="text/javascript">
	webix.ready(function(){
		webix.ui({
			rows: [
				{   view: "toolbar", padding:3, elements: [
					{view: "button", type: "icon", icon: "bars",
						width: 37, align: "left", css: "app_button", click: function(){
							$$("$sidebar1").toggle()
						}
					},
					{ view: "label", label: "My App"},
					{},
					{ view: "button", type: "icon", width: 45, css: "app_button", icon: "envelope-o",  badge:4},
					{ view: "button", type: "icon", width: 45, css: "app_button", icon: "bell-o",  badge:10}
				]
				},
				{
					cols:[
						{
							view: "sidebar",
							data: menu_data,
							on:{
								onAfterSelect: function(id){
									webix.message("Selected: "+this.getItem(id).value)
								}
							}
						},
						{
							template: ""
						}
					]
				}
			]
		});


	});
</script>
</body>
</html>